<template>
    <header class="c-100">
        <div class="c-100 soul-link">
            <div class="soul-link-content">
                <ul class="soul-link-content-left">
                    <li class="soul-border-left-px1"><a class="soul-padding-left-rem1 soul-padding-right-rem1"
                                                        href="javascript:;">首页</a></li>
                    <li class="soul-padding-left-rem1 soul-padding-right-rem1"><a href="javascript:;">后台管理</a></li>
                </ul>
            </div>
        </div>
        <div class="c-100 soul-logo">
            <div class="soul-logo-content">
                <ul class="soul-logo-content-left">
                    <li><a href="#">SOUL的博客</a></li>
                </ul>
            </div>
        </div>
    </header>
</template>
<style>
    .c-100{
        width: 100%;
    }
    .soul-link{
        background-color: #f9f9f9;
        border-bottom:1px solid #ededed;
    }
    .soul-link-content{
        margin: 0 13%;
        box-sizing: border-box;
        overflow: hidden;
        height:2rem;
        line-height: 2rem;
    }
    .soul-link-content-left{
        float:left
    }
    .soul-link-content-left li{
        float :left;
        border : 1px solid lightgray;
    }
    .soul-border-left-px1{
        border-left:1px solid lightgray;
    }
    .soul-padding-left-rem1{
        padding-left:1rem;
    }
    .soul-padding-right-rem1{
        padding-right:1rem;
    }
    .soul-logo{
        background-color: #fff;
        border-bottom:1px solid #ededed;
    }
    .soul-logo-content{
        box-sizing: border-box;
        margin: 0 13%;
        overflow: hidden;
        height:4rem;
        line-height: 4rem;
    }
    .soul-logo-content-left{
        float : left;
    }
    .soul-logo-content-left li{
        font-size:2.4rem;
        float: left;
    }
    @media screen and (max-width: 960px){
        .soul-link-content{
            margin: 0 auto;
            box-sizing: border-box;
            overflow: hidden;
            height:2rem;
            line-height: 2rem;
        }
        .soul-logo-content{
            box-sizing: border-box;
            margin: 0 auto;
            overflow: hidden;
            height:4rem;
            line-height: 4rem;
        }
    }
</style>